<template>
  <div>
    <!-- 条件查询表单 -->
    <div id="queryForm">
      <el-form :inline="true" :model="staff">
        <el-form-item label="姓名">
          <el-col :span="15">
            <el-input size="mini" id="user-name" v-model="staff.staffName" placeholder="姓名"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号">
          <el-col :span="10">
            <el-input v-model="staff.phoneNum" placeholder="手机号" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="级别">
          <el-col :span="3">
            <el-select v-model="staff.roleId" clearable placeholder="请选择">
              <el-option :value="1" label="老板" />
              <el-option :value="2" label="主管" />
              <el-option :value="3" label="员工" />
              <el-option :value="4" label="保安" />
              <el-option :value="5" label="保洁" />
              <el-option :value="6" label="经理" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="querySearch" size="mini">查询</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="resetForm" size="mini">清空</el-button>
          <el-button type="primary" size="mini">
            <router-link :to="'/staff/save'">
              <i class="el-icon-plus el-icon--right">&nbsp;增加</i>
            </router-link>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 员工数据展示 -->
    <el-table :data="staffList" style="width: 80%" align="center">
      <!-- 姓名 -->
      <el-table-column align="center" label="姓名" width="180">
        <template slot-scope="scope">
          <i class="el-icon-user-solid"></i>
          <span style="margin-left: 10px">{{ scope.row.staffName }}</span>
        </template>
      </el-table-column>
      <!-- 年龄 -->
      <el-table-column align="center" label="年龄" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-alarm-clock"></i> -->
          <span style="margin-left: 10px">{{ scope.row.staffAge ?? getRandomAge() }}</span>
        </template>
      </el-table-column>
      <!-- 手机号 -->
      <el-table-column align="center" label="手机号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.phoneNum }}</span>
        </template>
      </el-table-column>
      <!-- 部门 -->
      <el-table-column align="center" label="职务" width="180">
        <template slot-scope="scope">
          <i class="el-icon-office-building"></i>
          <span style="margin-left: 10px">{{ getRole(scope.row.roleId) }}</span>
        </template>
      </el-table-column>
      <!-- 薪资 -->
      <el-table-column align="center" label="薪资" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-money"></i> -->
          <span style="margin-left: 10px">{{ scope.row.staffSalary ?? getRandomSalary() }}￥</span>
        </template>
      </el-table-column>
      <!-- 入职时间 -->
      <el-table-column align="center" label="入职时间" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.entryDate }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row.staffId)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <router-link :to="'/staff/getById/' + scope.row.staffId">
            <el-button type="primary" icon="el-icon-edit" size="mini"> </el-button>
          </router-link>
          &nbsp;&nbsp;&nbsp;
          <el-button size="mini" icon="el-icon-delete" type="danger"
            @click="staffDelete(scope.row.staffId)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>

    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="current" :page-sizes="[5, 10, 15, 20, 30, 50, 100]" :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>
</template>

<script>

export default {
  // 员工信息
  data () {
    return {
      staff: {}, // 查询条件
      staffList: [{
        staffName: '王小虎',
        staffAge: 23,
        phoneNum: '14344343434',
        roleId: 4,
        staffSalary: 5000,
        entryDate: '2020-12-24',
      },
      {
        staffName: 'bbb李白',
        staffAge: 23,
        phoneNum: '143fdsaf44343434',
        roleId: 2,
        staffSalary: 5000,
        entryDate: '2020-12-24',
      },
      {
        staffName: '韩信',
        staffAge: 23,
        phoneNum: '143fdsaf44343434',
        roleId: 3,
        staffSalary: 5000,
        entryDate: '2020-12-24',
      },
      {
        staffName: '吕布',
        staffAge: 23,
        phoneNum: '143fdsaf44343434',
        roleId: 6,
        staffSalary: 5000,
        entryDate: '2020-12-24',
      }], // 数据表格中的数据
      current: 1, // 当前页
      limit: 10, // 每页显示的记录数
      total: 150, // 符合条件的总记录数，
      option: 1
    }
  },
  created () {

    this.findPage(this.current, this.limit)
  },

  methods: {
    getRandomAge () {
      let arr = [19, 22, 44, 35, 36, 42]
      return arr[Math.floor(Math.random() * arr.length)]
    },
    getRandomSalary () {
      let arr = ['4000', '4300', '6000', '5000', '4300']
      return arr[Math.floor(Math.random() * arr.length)]
    },
    getRole (roleId) {
      let id = roleId.toString()
      let role = ''
      switch (id) {
        case '1':
          role = '老板'
          break
        case '2':
          role = '主管'
          break
        case '3':
          role = '员工'
          break
        case '4':
          role = '保安'
          break
        case '5':
          role = '保洁'
          break
        case '6':
          role = '经理'
          break
      }
      return role
    },
    // 清空查询表单
    resetForm () {
      this.staff = {}
      this.findPage(this.current, this.limit)
    },
    // 查询
    querySearch () {
      // console.log(this.staff)
      this.findPage(this.current, this.limit)
    },
    // 当前页显示的记录数改变
    handleSizeChange (val) {
      console.log(val)
      this.findPage(this.current, val)
    },
    // 当前页发生变化
    handleCurrentChange (val) {
      // console.log(val, this.limit)
      this.findPage(val, this.limit)
    },
    staffEdit (index, row) {
      console.log('点击了编辑', index, row)
    },
    staffDelete (id, row) {
      this.$confirm("此操作会永久删除此员工信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //点击确实确认按钮
          this.$http({
            method: "delete",
            url: `staff/deleteStaff/${id}`,
          }).then((res) => {
            console.log('---当前的员工页面数据')
            console.log('当前的状态码', res.data.code)
            console.log('当前数据', res)
            if (res.data.code === 200) {

              this.findPage(this.current, this.limit)
              this.$message({
                type: "success",
                message: "删除成功!",
              })
              // this.$router.go(0)
            } else {
              this.$message({
                type: "info",
                message: "已取消删除",
              })
            }
          })
        })

    },
    // 员工分页查询
    findPage (current = 1, limit = 10) {
      console.log(`发送了请求，当前的页数是${current},请求数量是${limit}`)

      this.$http({
        method: "post",
        url: `/staff/findPage/${current}/${limit}`,
        data: JSON.stringify(this.staff),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then((res) => {
        console.log(res)
        let data = res.data.data
        this.staffList = data.rows
        this.total = data.total
        this.current = data.current
        // this.limit = data.limit
      })
    }
  }
}
</script>
<style>
#queryForm {
  width: 100%;
  height: 50px;
  text-align: left;
  padding: 10px 0 0 15px;
  margin-bottom: 10px;
  border-radius: 5px;
}

#queryForm .el-input {
  width: 100px;
}
</style>